import React, { Component, useState } from 'react'
import {
  SafeAreaView, // 适配有刘海的屏幕
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  Switch,
  ActivityIndicator,
  Platform,
  Image,
  Dimensions,
  SectionList, // 支持分组
  FlatList,
} from 'react-native'

export default function index() {

  const [dataList, setDataList] = useState([
    {
      id: 10001,
      title: '新闻',
    },
    {
      id: 10002,
      title: '娱乐',
    },
    {
      id: 10003,
      title: '体育',
    },
    {
      id: 10004,
      title: '财经',
    },
    {
      id: 10005,
      title: '军事',
    },
    {
      id: 10006,
      title: '科技',
    },
    {
      id: 10007,
      title: '时尚',
    },
    {
      id: 10008,
      title: '美食',
    },
    {
      id: 10009,
      title: '社会',
    },
  ])

  const Item = ({ title }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={dataList}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        // numColumns={3}
        ListFooterComponent={() => (
          <View>
            <Text style={[{ fontSize: 18 }, { textAlign: 'center' }]}>没有更多了</Text>
          </View>
        )}
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
})
